<script setup lang="ts">
import * as echarts from "echarts";
import {onMounted} from "vue";

onMounted(()=>{
  initChart2()
})
function initChart2() {
  // 初始化图表
  const chart = echarts.init(document.getElementById('pressureChart'));
  const realTimeValue = document.getElementById('realTimeValue');
  const warningArea = document.getElementById('warningArea');

  // 生成模拟数据
  function generateData() {
    const now = new Date();
    const data = [];
    const historyData = [];

    // 生成24小时数据
    for (let i = 0; i < 24; i++) {
      const time = new Date(now);
      time.setHours(time.getHours() - 24 + i);

      // 基础值 + 随机波动
      let value = 2.4 + Math.sin(i * Math.PI / 12) * 0.3 + Math.random() * 0.1;
      value = Math.round(value * 100) / 100;

      data.push({
        time: time.getHours() + ':00',
        value: value
      });

      historyData.push(value);
    }

    return {data, historyData};
  }

  // 获取数据
  const {data, historyData} = generateData();

  // 当前压力值
  let currentPressure = historyData[historyData.length - 1];
  realTimeValue.textContent = currentPressure.toFixed(2);

  // 检查警告状态
  function checkWarning(pressure) {
    if (pressure > 2.7) {
      warningArea.style.display = 'flex';
      warningArea.style.background = 'rgba(255, 85, 85, 0.1)';
      warningArea.style.borderColor = 'rgba(255, 85, 85, 0.3)';
      warningArea.querySelector('.warning-icon').style.background = '#ff5555';
      warningArea.querySelector('.warning-text').textContent = '压力值超过安全范围!';
    } else if (pressure > 2.6) {
      warningArea.style.display = 'flex';
      warningArea.style.background = 'rgba(255, 170, 0, 0.1)';
      warningArea.style.borderColor = 'rgba(255, 170, 0, 0.3)';
      warningArea.querySelector('.warning-icon').style.background = '#ffaa00';
      warningArea.querySelector('.warning-text').textContent = '压力值接近警戒线';
    } else {
      warningArea.style.display = 'none';
    }
  }

  checkWarning(currentPressure);

  // 图表配置
  const option = {
    backgroundColor: 'transparent',
    grid: {
      top: 10,
      left: 10,
      right: 40,
      bottom: 10,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(10, 20, 40, 0.9)',
      borderColor: '#00f7ff',
      borderWidth: 1,
      textStyle: {
        color: '#ffffff'
      },
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#00f7ff',
          color: '#0a0a1a'
        }
      }
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.time),
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.5)'
        }
      },
      axisLabel: {
        color: 'rgba(0, 247, 255, 0.8)',
        rotate: 45
      },
      axisTick: {
        alignWithLabel: true,
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.2)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.1)'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '压力值 (MPa)',
      nameTextStyle: {
        color: 'rgba(0, 247, 255, 0.8)',
        padding: [0, 0, 0, 40]
      },
      min: 1.8,
      max: 3.0,
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.5)'
        }
      },
      axisLabel: {
        color: 'rgba(0, 247, 255, 0.8)',
        formatter: '{value}'
      },
      axisTick: {
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.1)'
        }
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(0, 247, 255, 0.02)', 'rgba(0, 247, 255, 0.05)']
        }
      }
    },
    series: [
      {
        name: '历史压力',
        type: 'line',
        smooth: true,
        data: historyData,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          width: 3,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {offset: 0, color: '#00a2ff'},
            {offset: 1, color: '#00f7ff'}
          ])
        },
        itemStyle: {
          color: '#00f7ff',
          borderColor: '#ffffff',
          borderWidth: 1
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: 'rgba(0, 247, 255, 0.3)'},
            {offset: 1, color: 'rgba(0, 247, 255, 0.05)'}
          ])
        },
        markLine: {
          silent: true,
          data: [
            {
              name: '警戒线',
              yAxis: 2.7,
              lineStyle: {
                color: '#ff5555',
                width: 2,
                type: 'dashed'
              },
              label: {
                position: 'end',
                formatter: '警戒线: 2.7MPa',
                color: '#ff5555'
              }
            },
            {
              name: '警告线',
              yAxis: 2.6,
              lineStyle: {
                color: '#ffaa00',
                width: 1,
                type: 'dashed'
              },
              label: {
                position: 'end',
                formatter: '警告线: 2.6MPa',
                color: '#ffaa00'
              }
            }
          ]
        }
      },
      {
        name: '当前压力',
        type: 'line',
        data: Array(23).fill(null).concat([currentPressure]),
        symbol: 'roundRect',
        symbolSize: 12,
        lineStyle: {
          width: 0
        },
        itemStyle: {
          color: '#ffffff',
          borderColor: '#00f7ff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c} MPa',
          color: '#ffffff',
          backgroundColor: 'rgba(0, 247, 255, 0.3)',
          padding: [4, 8],
          borderRadius: 4
        }
      }
    ]
  };
  chart.setOption(option);

  // 模拟实时数据更新
  function updateData() {
    // 更新当前压力值
    const fluctuation = (Math.random() - 0.5) * 0.1;
    currentPressure = Math.max(2.0, Math.min(2.9, currentPressure + fluctuation));
    currentPressure = Math.round(currentPressure * 100) / 100;

    // 更新实时显示
    realTimeValue.textContent = currentPressure.toFixed(2);

    // 检查警告状态
    checkWarning(currentPressure);

    // 更新图表数据
    const newHistoryData = [...historyData.slice(1), currentPressure];
    chart.setOption({
      series: [
        {
          data: newHistoryData
        },
        {
          data: Array(23).fill(null).concat([currentPressure])
        }
      ]
    });

    // 每2秒更新一次数据
    setTimeout(updateData, 2000);
  }

  // 启动数据更新
  updateData();
}
</script>

<template>
  <div id="left2" class="pressure-panel">
    <div class="corner corner-tl"></div>
    <div class="corner corner-tr"></div>
    <div class="corner corner-bl"></div>
    <div class="corner corner-br"></div>

    <div class="panel-title">实时压力值</div>

    <div class="real-time-data">
      <div class="real-time-value" id="realTimeValue">0.00</div>
      <div class="real-time-label">当前压力值 (MPa)</div>
    </div>

    <div class="warning-area" id="warningArea" style="display: none;">
      <div class="warning-icon"></div>
      <div class="warning-text">压力值接近警戒线</div>
    </div>

    <div class="chart-container" id="pressureChart"></div>
  </div>
</template>

<style scoped>
/* 主面板容器 */
.pressure-panel {
  width: 21%;
  height: 27%;
  background: rgba(10, 20, 40, 0.7);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 247, 255, 0.3);
  border: 1px solid rgba(0, 247, 255, 0.2);
  position: absolute;
  overflow: hidden;
  backdrop-filter: blur(5px);
}

/* 科技感边框效果 */
.pressure-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid transparent;
  border-image: linear-gradient(
      to right,
      rgba(0, 247, 255, 0),
      rgba(0, 247, 255, 0.8),
      rgba(0, 247, 255, 0)
  ) 1 1;
  pointer-events: none;
}

/* 网格背景 */
.pressure-panel::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(0, 247, 255, 0.1) 1px, transparent 1px) 0 0 / 20px 20px,
  linear-gradient(rgba(0, 247, 255, 0.1) 1px, transparent 1px) 0 0 / 20px 20px;
  pointer-events: none;
  opacity: 0.3;
  z-index: 0;
}

/* 四角装饰 */
.corner {
  position: absolute;
  width: 15px;
  height: 15px;
  border-style: solid;
  border-color: #00f7ff;
  pointer-events: none;
}

.corner-tl {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.corner-tr {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
}

.corner-bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 2px 2px;
}

.corner-br {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}

/* 面板标题 */
.panel-title {
  font-size: 20px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00f7ff;
  text-shadow: 0 0 10px rgba(0, 247, 255, 0.7);
  position: relative;
  z-index: 1;
}

/* 面板副标题 */
.panel-subtitle {
  font-size: 14px;
  margin-bottom: 20px;
  color: rgba(0, 247, 255, 0.8);
  position: relative;
  z-index: 1;
}

/* 图表容器 */
.chart-container {
  width: 100%;
  height: 76%;
  position: relative;
  z-index: 1;
}

/* 实时数据展示 */
.real-time-data {
  width: 100px;
  position: absolute;
  top: 10px;
  right: 100px;
  background: rgba(0, 247, 255, 0.1);
  border: 1px solid rgba(0, 247, 255, 0.3);
  border-radius: 6px;
  z-index: 2;
}

.real-time-value {
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.real-time-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 5px;
}

/* 警告区域 */
.warning-area {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid rgba(255, 170, 0, 0.3);
  border-radius: 6px;
  padding: 8px 12px;
  z-index: 2;
  display: flex;
  align-items: center;
}

.warning-icon {
  width: 12px;
  height: 12px;
  background: #ffaa00;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 8px rgba(255, 170, 0, 0.7);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 170, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255, 170, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 170, 0, 0);
  }
}

.warning-text {
  font-size: 12px;
  color: #ffaa00;
}
</style>
